import React, {Component} from 'react';
import {Card, Button, Modal} from 'antd-mobile';
import {Link} from "react-router-dom";
import './MovieList.scss'
import http from "../util/http";
import cookies from "react-cookies";

class MovieList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            MovieList: [],
            vipId: cookies.load("vipId"),
        }
    }

    componentDidMount() {
        if (this.props.movieapi) {
            http.get(`${this.props.movieapi}`, this.props.pageInfo).then(({data}) => {
                if (data.code === 200) {
                    const MovieList = data.data.list
                    this.setState({
                        MovieList: MovieList
                    })
                }
            })

        } else {
            this.setState({
                MovieList: []
            })
        }
    }

    toMovieInfo = (movieId) => {
        this.props.history.push({pathname: `/movieInfo?movieId=${movieId}`})
        console.log(this.props)
    }


    renderMovieList() {
        return this.state.MovieList.map(item => (
            <Link key={item.movieId} to={`/movieInfo?movieId=${item.movieId}`}  className={"to-movieinfo"}>
                <Card full={true}>
                    <div className={"movie-hotlist-item"}>
                        <div className="left">
                            <img src={process.env.REACT_APP_BASE_API + "/img/" + item.cover} alt="" width={"80"} height={"90"}/>
                        </div>
                        <div className="middle">
                            <div className={"test1"}>{item.name}</div>
                            <div className={"test2"}>{item.translationName} </div>
                            <div className={"test3"}>{item.introduction} </div>
                            <div className={"test4"}>{item.releaseDate}</div>
                        </div>
                        <div className="right">
                            <button className={"movie-list-button"} type="warning"  size="small"
                                    style={{margin: 'auto', borderRadius: '15px'}}>查看 </button>
                        </div>
                    </div>
                </Card>
            </Link>
        ))
    }


    render() {
        return (
            <div className={"movie-hotlist"}>
                {
                    this.renderMovieList()
                }
            </div>

        );
    }
}

export default MovieList;
